<template>
    <div class="group-detail">
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">团购名称：</span>
                <el-input class="input" disabled v-model="group.name"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">团购分类：</span>
                <el-input class="input" disabled v-model="group.category"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">团购地区：</span>
                <el-input class="input" disabled v-model="group.area"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">咨询热线：</span>
                <el-input class="input" disabled v-model="group.hotLine"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">开始时间：</span>
                <el-input class="input" disabled v-model="group.startTime"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">结束时间：</span>
                <el-input class="input" disabled v-model="group.endTime"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">关联卡包ID：</span>
                <el-input class="input" disabled v-model="group.cardBagId"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">备注语：</span>
                <el-input class="input" disabled v-model="group.remark"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">意向金：</span>
                <el-input class="input" disabled v-model="group.intentionMoney"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">初始值：</span>
                <el-input class="input" disabled v-model="group.initValue"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group" v-if="group.asgb_share_status">
            <el-col class="col-item" :span="12">
                <span class="label">分享限制：</span>
                <el-input class="input" disabled v-model="group.share_point"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">按钮文字：</span>
                <el-input class="input" disabled v-model="group.button_title"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group" v-if="group.asgb_share_status">
            <el-col class="col-item" :span="12" style="display: flex;">
                <span class="label">文字颜色：</span>
                <el-input class="input" disabled v-model="group.title_color"></el-input>
                <span class="titleColor" :style="'background-color:'+group.title_color"></span>
            </el-col>
            <el-col class="col-item" :span="12" style="display: flex;">
                <span class="label">按钮颜色：</span>
                <el-input class="input" disabled v-model="group.button_color"></el-input>
                <span class="buttonColor" :style="'background-color:'+group.button_color"></span>
            </el-col>
        </el-row>
        <el-row class="row-group" v-for="(groupRulesItem,index) in group.rules" :key="index">
            <el-col class="col-item" :span="12" style="width: 33%;">
                <span class="label">奖励发放节点：</span>
                <el-input class="input" disabled v-model="groupRulesItem.reward_limit_name" style="width: 250px"></el-input>
            </el-col>
            <el-col class="col-item" :span="12" style="width: 33%;">
                <span class="label">分享奖励：</span>
                <el-input class="input" disabled v-model="groupRulesItem.reward_name" style="width: 250px;"></el-input>
            </el-col>
            <el-col class="col-item" :span="12" style="width: 33%;">
                <span class="label">奖励次数上限：</span>
                <el-input class="input" disabled v-model="groupRulesItem.reward_limit" style="width: 250px;"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
            <span class="label">目标集客量：</span>
            <el-input
              class="input"
              disabled
              v-model="group.asgb_target_num"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col style="display: flex; align-items: flex-start;" class="col-item" :span="24">
                <span class="label">团购优惠：</span>
                <div class="group-desc" v-html="group.desc">
                </div>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="24">
                <span class="label">活动头图：</span>
                <a class="img-wrapper" :href="group.headerImage" target="_blank">
                    <img :src="group.headerImage" alt="" class="img-header">
                </a>
            </el-col>
        </el-row>
       <!-- <el-row class="row-group">
            <el-col class="col-item" :span="24">
                <span class="label">标签图片：</span>
                <a class="img-wrapper" :href="group.markImage" target="_blank">
                    <img :src="group.markImage" alt="" class="img-mark">
                </a>
            </el-col>
        </el-row>-->
        <el-row class="row-group">
            <el-col class="col-item" :span="24">
                <span class="label">logo图片：</span>
                <a class="img-wrapper" :href="group.logoImage" target="_blank">
                    <img :src="group.logoImage" alt="" class="img-logo">
                </a>
            </el-col>
        </el-row>
        <!--<el-row class="row-group">
            <el-col class="col-item" :span="24">
                <span class="label">流程图片：</span>
                <a class="img-wrapper img-flow-wrapper" :href="group.flowImage" target="_blank">
                    <img :src="group.flowImage" alt="" class="img-flow">
                </a>
            </el-col>
        </el-row>-->
        <el-row class="row-group">
            <el-col class="col-item" :span="24">
                <span class="label">分享海报：</span>
                <a class="img-wrapper" :href="group.postImage" target="_blank">
                    <img :src="group.postImage" alt="" class="img-post">
                </a>
            </el-col>
        </el-row>
        <el-row class="row-group" v-if="group.share_pic">
            <el-col class="col-item" :span="24">
                <span class="label">分享弹窗图片：</span>
                <a class="img-wrapper" :href="group.share_pic" target="_blank">
                    <img :src="group.share_pic" alt="" class="img-post">
                </a>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col 
                style="display: flex; justify-content: center;" 
                class="col-item" 
                :span="24" 
                v-if="readonly === false">
                <el-button @click="setCheckStatus(2)" type="primary">审核通过</el-button>
                <el-button @click="setCheckStatus(3)" type="info">审核不通过</el-button>
                <el-button @click="$router.back()" type="primary">返回上一页</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
	import {dateFormatter} from "../../../../common/js/util";

	export default {
		data() {
			return {
				group: {}
			}
		},
        props: {
            id: Number,
            readonly: {
                type: Boolean,
                default: false
            }
        },
		methods: {
			getGroupDetail() {
				var that = this;
				this.$http.post('/admin/afterSalesGroupBuy/index.php?act=groupBuy&op=info', {
					id: this.$route.query.id || this.id
				}).then(function(res) {
					if (res.code == 1) {
                        let tempArr = [];
                        if(res.data.rules&&res.data.rules.length){
                            tempArr = res.data.rules.map(function (item) {
                            return {
                                reward_limit_name: item.reward_point==1?'分享':item.reward_point==2?'着陆':item.reward_point==3?'报名':'',
                                reward_limit: item.reward_limit,
                                reward_id: item.reward_id,
                                reward_name: item.reward_name,
                                reward_point: item.reward_point
                            }
                        });
                        }
						that.group = {
							id: res.data.asgb_id,
							name: res.data.asgb_title_name,
							category: res.data.asgb_class_name,
							area: res.data.asgb_province_name + res.data.asgb_city_name,
							hotLine: res.data.asgb_hotline,
							startTime: dateFormatter('YYYY-MM-DD HH:mm:ss', res.data.asgb_start_time * 1000),
							endTime: dateFormatter('YYYY-MM-DD HH:mm:ss', res.data.asgb_end_time * 1000),
							cardBagId: res.data.asgb_package_id,
							remark: res.data.asgb_tip_words,
							intentionMoney: res.data.asgb_intention_gold,
							initValue: res.data.asgb_init_value,
							desc: res.data.asgb_desc,
							reason: res.data.asgb_reject_reason,
							headerImage: res.data.asgb_poster_header_image,
							markImage: res.data.asgb_label_image,
							logoImage: res.data.asgb_logo_image,
							flowImage: res.data.asgb_process_image,
							postImage: res.data.asgb_share_poster_image,
							button_title: res.data.button_title,
							title_color: res.data.title_color,
							button_color: res.data.button_color,
							asgb_title_name: res.data.asgb_title_name,
							rules: tempArr,
                            asgb_share_status: res.data.asgb_share_status,
                            share_pic:res.data.share_pic,
                            share_point:res.data.share_point==1?'分享前':'分享后',
                            asgb_target_num:res.data.asgb_target_num,
                        };
					} else {
						alert(res.msg);
					}
				})
			},
			async setCheckStatus(checkStatus) {
                try {
                    let reason = '', cancel = false
                    if (checkStatus === 3) {
                        reason = await this.$prompt('请输入不通过原因', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPlaceholder: '填写不通过原因',
                            // inputValue: this.group.reason || '',
                            inputValidator: value => {
                                if (!value) return '原因不能为空'
                                else if(value.length > 100) return '长度不能超过100个字符'
                                else return true
                            }
                        }).then(({ value }) => value).catch(() => (cancel = true))
                    }
                    if (cancel) return
				    const res = await this.$http.post('/admin/afterSalesGroupBuy/index.php?act=groupBuy&op=audit', {
				    	id: this.group.id,
				    	status: checkStatus,
                        reason
				    })
                    if (res.code == 1) {
						this.$router.back()
				    } else {
                        throw res.msg
				    }
                } catch(error) {
                    this.$message.error(`${error}`)
                }
			}
		},
		created() {
			this.$parent.tabLists?.splice(1, 0, {"label": "审核", "name": 'group-detail'})
			this.getGroupDetail();
		},
		name: "group-detail"
	}
</script>

<style lang="scss" scoped>
    .group-detail {
        width: 1170px;
        padding: 30px;
        font-size: 14px;
        .row-group {
            .col-item {
                .label {
                    display: inline-block;
                    font-weight: 600;
                    width: 100px;
                    text-align: right;
                }
                .input {
                    width: 400px;
                }
                .group-desc {
                    box-sizing: content-box;
                    width: 375px;
                    border: 1px solid #e4e7ed;
                    /deep/img {
                        width: 100%;
                        float: left;
                    }
                }
                .buttonColor,.titleColor{
                    display: inline-block;
                    width: 28px;
                    height: 28px;
                    border-radius: 4px;
                }
                .img-wrapper {
                    .img-header {
                        width: 360px;
                        height: 188px;
                        vertical-align: top;
                    }
                    .img-mark {
                        width: 360px;
                        height: 21px;
                        vertical-align: top;
                    }
                    .img-logo {
                        width: 50px;
                        height: 50px;
                        vertical-align: top;
                    }
                    .img-flow {
                        width: 180px;
                    }
                    .img-post {
                        width: 180px;
                        vertical-align: top;
                    }
                }
                .img-wrapper.img-flow-wrapper {
                    display: inline-block;
                    width: 180px;
                    max-height: 320px;
                    overflow-y: auto;
                    vertical-align: top;
                }
                .img-wrapper + .img-wrapper {
                    margin-left: 20px;
                }
            }
        }
        .row-group + .row-group {
            margin-top: 20px;
        }
    }
    .el-textarea {
    width: 86%;
}
</style>